<template>
 <div class="login">
  <hooyn-nav-bar class="header" leftIcon="arrow-left" title="基茶超脑" backgroundColor="#d76a2c" leftIconfont="true" fontSize="14px" leftWidth=""
    :returnNav="true" >
    <template #left>
      <!-- <span class="outlogin" v-if="state.islogin == 'false'" @click="goutlogin">登录</span>v-else -->
      <span class="outlogin"  @click="handlelogout">退出登录</span>
      <!-- <span class="outlogin" v-else  @click="handkeLogin">登录</span> -->
      
    </template>
    <template #right>
      <img @click.stop="handleExitApp" src="../../static/svg/xiaochengxu.svg" alt="">
    </template>
  </hooyn-nav-bar>
  <div :scroll-y="true" class="nav scroll-y">

    <!-- 人工智能AI -->
    <div class="nav-card">
      <div class="nav-header">
        <div class="img">
          <img src="../../static/nav/ai.svg" mode="" />
        </div>
        <text>人工智能AI</text>
      </div>

      <div class="nav-list ">
        <div class="item" v-for="item in state.aiList" @click="gotoAi(item)">
          <div class="img-box">
            <img :src="require('../../static/nav/item/' + item.img + '.png')" mode="" />
          </div>
          <text>{{ item.label }}</text>
        </div>
      </div>
    </div>

    <!-- 商业智能BI -->
    <div class="nav-card">
      <div class="nav-header">
        <div class="img">
          <img src="../../static/nav/bi.svg" mode="" />
        </div>
        <text>商业智能BI</text>
      </div>

      <div class="nav-list">
        <div class="item" v-for="item in state.biList" @click="gotoBi(item)">
          <div class="img-box">
            <img :src="require('../../static/nav/item/bi-' + item.value + '.png')" mode="" />
          </div>
          <text>{{ item.label }}</text>
        </div>
      </div>
    </div>

    <!-- 客户智能CI -->
    <div class="nav-card">
      <div class="nav-header">
        <div class="img">
          <img src="../../static/nav/ci.svg" mode="" />
        </div>
        <text>客户智能CI</text>
      </div>

      <div class="nav-list">
        <div class="item" v-for="item in state.ciList" @click="gotoCi(item)">
          <div class="img-box">
            <img :src="require('../../static/nav/item/ci-' + item.value + '.png')" mode="" />
          </div>
          <text>{{ item.label }}</text>
        </div>
      </div>
    </div>

    <!-- 数据智能DI -->
    <div class="nav-card">
      <div class="nav-header">
        <div class="img">
          <img src="../../static/nav/di.svg" mode="" />
        </div>
        <text>数据智能DI</text>
      </div>

      <div class="nav-list">
        <div class="item" v-for="item in state.diList" @click="gotoDi(item)">
          <div class="img-box">
            <img :src="require('../../static/nav/item/' + item.img + '.png')" mode="">
          </div>
          <text>{{ item.label }}</text>
        </div>
      </div>
    </div>
    <van-dialog class="out" v-model:show="state.show" show-cancel-button @confirm="handleout" confirmButtonColor="#fff" confirmButtonText="退出">
      <template #title>
        <span>提示</span>
      </template>
      <template #default>
        <span>确认退出登录</span>
      </template>
      <template #foole>

      </template>
    </van-dialog>
  </div>
 </div>
</template>

<script setup>
// import { useUserInfoStore } from '@/stores/userInfo'
// let { isLogin, phoneInfo } = storeToRefs(useUserInfoStore())
import { showConfirmDialog,showDialog } from 'vant';
import { StatusBar } from '@capacitor/status-bar';
import $api from '@/utils/api.js'
import { App } from '@capacitor/app';
const router = useRouter()
const route = useRoute()

const state = reactive({
  show:false,
  islogin:'',
  userInfo: '',
  aiList: [
    {
      label: "策略助手",
      value: "clzs",
      img: 'ai-znzs',
    }, {
      label: "咨讯助手",
      value: "zxzs",
      img: 'ai-znkf',
    }, 
    {
      label: "管理助手",
      value: "glzs",
      img: 'ci-rwgl',
    }, {
      label: "研发助手",
      value: "yfzs",
      img: 'ci-pxgl'
    },
     {
      label: "设计助手",
      value: "sjzs",
      img: 'ci-spgl'
    }, {
      label: "财务助手",
      value: "cwzs",
      img: 'ai-caiwu'
    }, 
    {
      label: "人事助手",
      value: "rszs",
      img: 'ai-renshi'
    },
     {
      label: "行政助手",
      value: "xzzs",
      img: 'ai-xzheng'
    },
  ],
  biList: [
    {
      label: "首页",
      value: "home",
    }, {
      label: "财务看板",
      value: "finance",
    }, {
      label: "客户看板",
      value: "client",
    }, {
      label: "产品看板",
      value: "product",
    }, {
      label: "人才看板",
      value: "talents",
    }, 
    {
      label: "绩效看板",
      value: "jixiao",
    },
    {
      label: "图文识别",
      value: "jixiao",
    },

  ],
  ciList: [
    {
      label: "订货管理",
      value: "dhgl",
    }, {
      label: "合同管理",
      value: "htgl",
    }, {
      label: "商品管理",
      value: "spgl",
    }, {
      label: "基茶研究院",
      value: "pxgl",
    }, {
      label: "销售管理",
      value: "xsgl",
    }, {
      label: "项目管理",
      value: "rwgl",
    }, {
      label: "会员管理",
      value: "hygl",
    }, {
      label: "人员管理",
      value: "rygl",
    }
  ],
  diList: [
    {
      label: "行业动态",
      value: "hydt",
      img: 'di-hydt'
    }, {
      label: "风险预警",
      value: "fxyj",
      img: 'di-fxyj'
    }, 
    {
      label: "客户洞察",
      value: "khdc",
      img: 'bi-client'
    },
     {
      label: "政策解析",
      value: "zcjx",
      img: 'di-zhc'
    }
  ]
})
const goutlogin = () =>{
  router.push({
      path: '/login'
    })
}
const gotoAi = (item) => {
  console.log(item,122121212);
  // if (item.value !== 'clzs' && item.value !== 'zxzs' && item.value !== 'glzs' && item.value !== 'yfzs' && item.value !== 'sjzs' ) return false
  if (item.value == 'xzzs') {
    router.push({
      path: '/iframe',
      query: {
        url: 'https://open.es.xiaojukeji.com/webapp/feESWebapp/index'
      }
    })
  }else if(item.value == 'glzs'){
    router.push({
      path: '/kimi',
      query: {
        url: 'https://kimi.moonshot.cn/'
      }
    })
  } else if (item.value === 'cwzs') {
    if (state.islogin == true) {
      router.push({
        path: '/ai/financial',
        query: {
          type: item.value,
          title: item.label
        }
      })
    }  else{
      router.push({
        path: '/login'
      })
    }
  
  } else if (item.value === 'yfzs') {
    router.push({
      path: state.islogin == true ? '/ipad/info' : '/login',
      query: {}
    })
}else if(item.value == 'zxzs'){
      router.push({
      path: '/Assistant',
      query: {
        url: 'https://metaso.cn/'
      }
    })
    } else {
     router.push({
      path: '/chatAi',
      query: {
        type: item.value,
        title: item.label
      }
    })
  }
}

const gotoBi = (item) => {
  if (state.islogin == true) {
    if(item.value === 'jixiao') {
      router.push({
      path: `/recognition`
    })
    }else {
      router.push({
      path: `/bi/${item.value}`
    })
    }
  
  } else {
    router.push({
      path: '/login'
    })
  }

  //  if(item.value == 'jixiao'){
   
  // } else {
  //   router.push({
  //     path: '/login'
  //   })
  // }
 
}

const gotoCi = (item) => {
  // router.push({
  //   path: `/ci/home`
  // })router.push({
  //   path: `/ci/home`
  // })
//   showDialog({
//   message: '正在开发中',
//   theme: 'round-button',
//   confirmButtonColor:'#D76A2C',
// }).then(() => {
//   // on close
// });
// router.push({
//       path: '/chatAi',
//       query: {
//         type: item.value,
//         title: item.label
//       }
//     })
  }

const gotoDi = (item) => {
    if (item.value === 'khdc') {
    router.push({
      path: `/di/${item.value}`
    })
  }
  // else {
  //   router.push({
  //     path: '/chatAi',
  //     query: {
  //       type: item.value,
  //       title: item.label
  //     }
    // })
//     showDialog({
//   message: '正在开发中',
//   theme: 'round-button',
//   confirmButtonColor:'#D76A2C',
// }).then(() => {
//   // on close
// });
  // }
}
const handlelogout = () => {
  state.show = true
}

const handkeLogin = () => {
  router.push({
    path: `/login`
  })
}

const handleout = () => {
  router.push({
    path:'/login'
  })
  state.islogin = false
  state.userInfo = ''
  localStorage.setItem('userInfo', '')
  localStorage.setItem('islogin', false)

}

const handleExitApp = () => {
  if (App) {
    App.exitApp(); // 使用 Capacitor 的退出方法
  } else {
    console.warn('退出应用程序功能不可用。');
  }
}
watch(() => route, () => {
  state.userInfo = localStorage.getItem('userInfo')
  state.islogin = state.userInfo && localStorage.getItem('islogin') == 'true' ? true : false
}, {
  deep: true,
  immediate: true
})
onMounted(() => {
  // if (isLogin.value) {
  //   console.log(isLogin.value);
  // } else {
  //   uni.navigateTo({
  //     url: "/pages/login/index"
  //   })
  // }
  // 设置状态栏颜色
  StatusBar.setBackgroundColor({ color: '#d76a2c' });
  $api.HumanResources({})
})
</script>

<style lang="scss" scoped>
.header {
  // width: 100vw;
  // height: 2.75rem;
  background: $base-color-primary;
  // display: flex;
  // justify-content: space-between;
  // align-items: center;
  // padding: 0rem 0.5rem 0rem 1rem;
  // font-size: 1rem;
  // box-sizing: border-box;
  // left: 0px;
  // top: 0px;
  // color: #fff;
  .outlogin{
    width: 100%;
    font-size: .875rem;
  }
  img {
    max-width: 5.5rem;
    height: 1.75rem;
  }
}

.nav {
  box-sizing: border-box;
  padding: .625rem 1rem 1.375rem;
  position: relative;
  height: calc(100vh - 3.75rem);
}

.nav-card {
  padding: .375rem;
  // background-color: $base-color-primary;
  border-radius: 1.0625rem;
  background-size: cover;
  background-image: url('../../static/nav/nav-bg.png');

  // &.short {
  //   background-image: url('../../static/nav/nav-bg.png');
  // }

  &+.nav-card {
    margin-top: .625rem;
  }

  .nav-header {
    display: flex;
    align-items: center;

    .img {
      width: 2.375rem;
      height: 2.375rem;
      box-sizing: border-box;
      background-color: $base-color-primary;
      border-radius: 50%;
      padding: .7813rem;
      margin-right: .375rem;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-left: .125rem;

      img {
        width: 1.4375rem;
        height: 1.4375rem;
      }
    }

    text {
      font-size: .9375rem;
      color: #0C131B;
      font-weight: 600;
      margin-left: .375rem;
    }
  }

  .nav-list {
    border-radius: .875rem;
    background: #FBF9F8;
    padding: .9375rem .375rem;
    margin-top: .375rem;
    display: flex;
    align-items: flex-start;
    align-content: flex-start;
    // gap: 10px;
    align-self: stretch;
    flex-wrap: wrap;

    .item {
      width: calc(25% - .5625rem);
      box-sizing: border-box;
      padding: .625rem 0rem;
      border-radius: .625rem;
      background: #FFF;
      box-shadow: 0px .125rem .25rem 0px #D3EACC;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: relative;
      margin: .2813rem;

      .img-box {
        width: 3.125rem;
        height: 3.125rem;
        position: relative;
      }

      img {
        width: 3.125rem;
        height: 3.125rem;
        position: relative;
      }

      .img-box::before {
        content: " ";
        width: 1.4375rem;
        height: 1.4375rem;
        background-color: #EAFBD4;
        display: inline-block;
        position: absolute;
        border-radius: 50%;
        top: .0625rem;
        right: .0625rem;
      }

      text {
        font-size: .75rem;
        color: #0C131B;
        margin-top: -0.3125rem;
        position: relative;
        z-index: 11;
      }
    }

  }
}
:deep() .out{
  width: 21.6875rem;
  .van-dialog__header{
    margin-bottom: .5rem;
    line-height: 0;
    font-size: 1.1875rem;
  }
  .van-dialog__content{
    text-align: center;
    padding: 1.25rem 0.625rem;
    font-size: 0.9375rem;
  }
  .van-dialog__footer{
    .van-button--default{
      border: none;
    }
    padding: 10px 2.4375rem 16px;
    >button{
      width: 6.875rem;
      border-radius: 2.0625rem;
      // border: 0;
      background-color: #fff;
    }
    button:nth-child(1){
      margin-right: 2.3125rem;
      color: #725641;
      background-color: #ffe4d4;
    }

    button:nth-child(2){
      background-color: #D76A2C;
      color: #fff;
      box-shadow: unset
      
    }
  }
  .van-hairline--top:after{
    border:none;
  }
  .van-hairline--left:after{
    border: none;
  }
}
</style>